<template>
  <el-carousel height="580px" class="el-carousel">
    <el-carousel-item class="carosel-inner" v-for="(item, index) in bannerList" :key="index">
      <div class="carousel-wrap">
        <div class="carousel-caption">
          <h1 class="bounce">{{ item.title }}</h1>
          <ul>
            <li v-for="(descItem, descIndex) in item.descList" :key="`desc-${index}-${descIndex}`">{{ descItem }}</li>
          </ul>
          <el-button round @click="goFile">{{ item.btn }}</el-button>
          <div class="version-wrapper">
            <a
              class="version-item"
              v-for="(linkItem, linkIndex) in item.linkList"
              :key="`link-${index}-${linkIndex}`"
              :href="linkItem.link"
              target="_blank"
            >
              <span class="version-number">{{ linkItem.versionNo }}</span>
              <span>{{ linkItem.date }} &gt;&gt;</span>
            </a>
          </div>
        </div>
        <div class="carousel-img">
          <img :src="item.bannerImg" />
        </div>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'Banner',
  data() {
    return {
      bannerList: [
        {
          title: '一款功能齐全的文件管理系统',
          descList: ["文件传输，安全快捷","在线解压缩，一触即达","回收站，防止文件误删"],
          btn: '开源免费，立即体验',
          linkList: [
            {
              versionNo: "最新版本v1.3.0",
              date: "2020年12月30日发布",
              link: "https://gitee.com/qiwen-cloud/qiwen-file"
            },
            // {
            //   versionNo: "4.0.beta3 版本",
            //   date: "12月31日发布",
            //   link: ""
            // }
          ],
          bannerImg: require('@/assets/images/home/banner1.png')
        },
        // {
        //   title: '一款功能齐全的文件管理系统',
        //   descList: ["文件传输，安全快捷","在线解压缩，一触即达","回收站，防止文件误删"],
        //   btn: '开源免费，立即体验',
        //   linkList: [
        //     {
        //       versionNo: "3.3 版本",
        //       date: "10月15日发布",
        //       link: ""
        //     },
        //     {
        //       versionNo: "4.0.beta3 版本",
        //       date: "12月31日发布",
        //       link: ""
        //     }
        //   ],
        //   bannerImg: require('@/assets/images/home/banner2.png')
        // }
      ]
    }
  },
  methods: {
    // 跳转到网盘页面
    goFile() {
      this.$router.push({ name: 'File', query: { filePath: '/', fileType: 0 } })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'

.el-carousel {
    width: 100%;
    display: block;
    background: linear-gradient(to right, #409EFF, #79bbff);

    .carosel-inner {
      width: 100%;
      animation: mymove 10s infinite;

      .carousel-wrap {
        position: relative;
        margin 0 auto
        width: 85%;
        height: 100%;

        .carousel-caption {
          position: absolute;
          left: 0;
          top: 140px;
          text-shadow: none;
          max-width: 550px;
          color: #fff;
          text-align center

          h1 {
            font-weight: normal;
            margin: 0;
            font-size: 30px;
            animation-delay: 1s;
          }

          ul {
            padding: 25px 0 25px 20px;

            li {
              line-height: 2.2;
              font-size: 15px;
            }
          }
          >>> .el-button {
            border-width 2px
            background transparent
            color #fff
            &:hover {
              border-color transparent
              background $Warning
            }
          }
          .version-wrapper {
            margin: 0 0 10px;
            .version-item {
              display: inline-block;
              margin: 50px 0 0 18px;
              color: rgba(255,255,255,0.8);
              &:hover {
                text-decoration underline
                color #fff
              }
              .version-number {
                margin-right 16px
              }
            }
          }
        }

        .carousel-img {
          max-width: 580px;
          position: absolute;
          right: 0px;
          top: 0;

          img {
            max-width: 100%;
            vertical-align: middle;
          }
        }
      }
    }
  }
</style>
